<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--    mdui-->
    <link rel="stylesheet" href="https://unpkg.com/mdui@1.0.2/dist/css/mdui.min.css"/>
    <!--    xterm.js-->
    <link rel="stylesheet" href="node_modules/xterm/css/xterm.css"/>
    <script src="node_modules/xterm/lib/xterm.js"></script>
    <script src="node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
    <meta charset="UTF-8">
    <title>豆瓣TOP250电影问答系统</title>
</head>
<body>
<div class="mdui-container mdui-center mdui-typo">
    <div class="mdui-col-xs-12">
        <!--    <div style="display: flex; justify-content: center;">-->
        <h1 style="display: flex; justify-content: center;">豆瓣TOP250电影问答系统</h1>
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label" for="question">问题</label>
            <input class="mdui-textfield-input" type="text" name="question" id="question"/>
        </div>
        <button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo mdui-m-t-3 mdui-btn-block"
                type="button" id="submit">搜索
        </button>
        <div class="mdui-m-t-3" id="terminal">
        </div>
    </div>
</div>
<!--xterm-->

<script>
    let term = new Terminal();
    let fitAddon = new FitAddon.FitAddon();
    term.loadAddon(fitAddon);
    term.open(document.getElementById("terminal"));
    fitAddon.fit();
    term.write('欢迎使用豆瓣TOP250电影问答系统！\r\n');
    term.write('请在问题框中输入问题，并点击搜索。\r\n');

    window.onResize(function () {
        fitAddon.fit();
    });
</script>
<!--mdui-->
<script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>
<script>
    var $ = mdui.$;
    $("#submit").on('click', function () {
        var question = $("#question").val();
        // term.clear();
        term.write(`你的问题是：${question} \r\n\r\n`);
        $.ajax({
            url: "/search",
            method: "POST",
            data: {
                "question": question
            },
            success: function (data, textStatus, xhr) {
                term.write(`${data} \r\n\r\n`);
            },
            error: function (xhr, textStatus) {
                term.write(`搜索失败，出现错误\r\n\r\n`);
            }
        })
    })
</script>
</body>
</html>